<template>
	<a-modal
		:visible="visible"
		width="640px"
		title="作废"
		centered
		destroyOnClose
		:maskClosable="false"
		@cancel="cancel"
		:bodyStyle="{padding: 0}">
		<a-form
			ref="formRef"
			class="flex-container-nomal margin-4"
			:model="modelRef"
			:rules="formRules"
			layout="vertical"
			:label-col="{span: 24}"
			:wrapper-col="{span: 24}">
			<div class="flex1 auto-y">
				<a-row :gutter="16">
					<a-col :span="24" class="margin-bot">
						作废会删除该合同收支，
						<span class="red">如果是企业合同，整个合同下的全部子合同收支都将删除</span>
						，确定要作废【{{ info.name }}】的合同吗？
						<br />
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="作废原因" name="quiteComment">
							<a-textarea v-model:value="modelRef.quiteComment" show-count :maxlength="500" placeholder="请输入作废原因" />
						</a-form-item>
					</a-col>
				</a-row>
			</div>
		</a-form>
		<template #footer>
			<a-button @click="cancel">取消</a-button>
			<a-button type="primary" @click="submit">确定</a-button>
		</template>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {enterContractObsolete, enterContractBatchObsolete} from '@/api/charter-contract'
	import {message} from 'ant-design-vue'
	const modelRef = reactive<any>({
		quiteComment: null
	})
	const props = defineProps<{
		visible: boolean
		info: object
		contractIds?: Array<[]>
	}>()
	const staffCheckInInfo = ref<any>({})
	const formRules: {
		[key: string | number]: any
	} = {
		quiteComment: [
			{
				required: true,
				message: '请输入作废原因'
			}
		]
	}
	const formRef = ref<any>()
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		modelRef.quiteComment = null
		emit('update:visible', false)
		// modelRef.quiteComment = null
	}
	const closes = () => {
		let time = setTimeout(() => {
			emit('success')
			cancel()
			clearTimeout(time)
		}, 100)
	}
	const quiteComment = ref<any>(null)
	const submit = () => {
		formRef.value.validate().then(() => {
			// 批量退租
			if (props.contractIds?.length) {
				let infos = {
					contractIds: props.contractIds,
					quiteComment: modelRef.quiteComment
				}
				enterContractBatchObsolete(infos).then(res => {
					message.success('操作成功')
					closes()
				})
			} else {
				let infos = {
					enterPriseContractId: props.info?.id,
					quiteComment: modelRef.quiteComment
				}
				enterContractObsolete(infos).then(res => {
					message.success('操作成功')
					closes()
				})
			}
		})
	}
</script>

<style lang="less">
	.margin-4 {
		margin: 4px;
		height: 200px;
	}
	.margin-bot {
		margin-bottom: 16px;
	}
	.red {
		color: @error-color;
	}
</style>
